This page demonstrates how to create a database centric web applications. Two
components, a QBE form and a SQL table.
<ul>
       <li>Place a panel component on the page, and set its client id to mainP</li>
       <li>
              Create query form
              <ul>
                     <li>Place a DatabaseRecord component (custom table)</li>
                     <ul>
                            <li>Select the Form and</li>
                            <li>Set its schema and tableName as appropriate</li>
                            <li>Give a cliend ID</li>
                            <li>Set Generate Form to true</li>
                            <li>Set Record Action to query</li>
                            <li>Press Submit</li>
                     </ul>
                     <li>Delete rows that not needed from the generated form</li>
              </ul>
       </li>
       <li>
              Create detail table
              <ul>
                     <li>Place a DatabaseTable component (custom table)</li>
              </ul>
       </li>
</ul>
<ul>
       <ul>
              <li>To make it dynamic</li>
       </ul>
</ul>
<ul>
       <ul>
              <ul>
                     <li>set its SQL statement&nbsp;using JSP express langugage,
                         select swimmerAge, date, team, finalTime from
                         pcosc.g_race where swimmerUSSNo='${swimmerID.value}'
                         and distance='${distanceOptions.value}' and
                         course='${courseOptions.value}' and
                         stroke='${strokeOptions.value}' order by date</li>
                     <li>Give a cliend ID, e.g. races</li>
                     <li>Set Generate Binding true</li>
                     <li>Press Submit</li>
              </ul>
       </ul>
</ul>
<ul>
       <ul>
              <li>To highlight results</li>
       </ul>
</ul>
<ul>
       <ul>
              <ul>
                     <li>Set&nbsp;highligh style for the SQL table to
                         color:white;background:highlight;</li>
                     <li>Assign JB.setProperty('races','selected','$
                         {races.sequence}', 'mdPanel') to the row</li>
              </ul>
       </ul>
</ul>
<ul>
       <ul>
              <li>To make it sortable</li>
       </ul>
</ul>
<ul>
       <ul>
              <ul>
                     <li>Place an image in the time column set its location to
                         resources/images/grid/${races.reverse?'asc':'desc'}.gif
                         and assign its visible property to ${races.sortBy!='3'}</li>
                     <li>Set onClick of the header
                         JB.sortList('races','3','mainP');</li>
              </ul>
       </ul>
</ul>